<template>
  <div class="daily-store-inspection-records">
    <!-- <searchBar v-bind="searchProps" @search="search">
      <template #other>
        <el-button
          class="btn-black"
          @click="operate(2)"
          :disabled="tableProps.selectList.length === 0"
          v-permiss="20201"
          >{{
            getLanguageInfo(locale, [
              $t("common.batch"),
              $t("common.close"),
              $t("common.problem"),
            ])
          }}</el-button
        >
        <el-button
          class="btn-black"
          @click="operate(3)"
          :disabled="tableProps.selectList.length === 0"
          >{{
            getLanguageInfo(locale, [$t("common.batch"), $t("common.export")])
          }}</el-button
        >
      </template>
    </searchBar>
    <div class="table-container mt-[16px]">
      <myTable v-bind="tableProps" ref="myTableRef">
        <template #status="scope">
          <span :class="getTaskStatusClass(scope.row, 3)">{{
            scope.row.statusUrgency
          }}</span>
        </template>
        <template #operation="scope">
          <div class="operate">
            <span @click="toDetail(scope.row)">{{ $t("common.detail") }}</span>
          </div>
        </template>
      </myTable>
    </div> -->
  </div>
</template>
<script setup name="dailyStoreInspectionRecords">
import { ref, reactive, onBeforeMount, onActivated } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
// import { getListByTypeArr } from "@/api/index";
// import { getShopList, closeShopDeal, exportShopList } from "@/api/inspection-task";
// import {
//   getLanguageInfo,
//   submitForm,
//   getPaginationData,
//   getSelectValue,
//   downloadFile,
//   getLovArrayByType,
//   getMeetingPlaceInfo,
//   getTaskStatusClass,
//   getStatusValue,
// } from "@/utils/common";
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
import searchBar from "@/components/searchBar/index.vue";
import myTable from "@/components/myTable/index.vue";

const { t, locale } = useI18n();
let query = reactive({
  planName: "",
  checkResult: "",
  statusUrgencySearchFlag: null,
  checkUser: "",
  taskDescription: "",
  checkStartTime: null,
  checkEndTime: null,
});
let myTableRef = ref(null);
const router = useRouter();
let searchProps = reactive({
  searchList: [
    {
      placeholder: ["common.tenantName", "common.keyWord"],
      prop: "taskDescription",
      type: "text",
    },
    {
      placeholder: ["page.checkTable", "common.title", "common.keyWord"],
      prop: "planName",
      type: "text",
    },

    {
      placeholder: ["page.inspector", "common.keyWord"],
      prop: "checkUser",
      type: "text",
    },
    {
      placeholder: "page.checkResult",
      prop: "checkResult",
      type: "dropdown",
      list: [
        {
          label: t("enum.hasProblem"),
          value: 0,
        },
        {
          label: t("enum.noExcepTion"),
          value: 1,
        },
      ],
    },
    {
      placeholder: "page.checkTime",
      prop: "time",
      type: "datetimerange",
    },
    {
      placeholder: "page.problemStatus",
      prop: "statusUrgencySearchFlag",
      type: "dropdown",
      list: [
        {
          label: t("enum.NO_FOLLOWUP"),
          value: 0,
        },
        {
          label: t("enum.PENDING") + " | " + t("enum.LOW"),
          value: 3,
        },

        {
          label: t("enum.PENDING") + " | " + t("enum.MEDIUM"),
          value: 2,
        },
        {
          label: t("enum.PENDING") + " | " + t("enum.HIGH"),
          value: 1,
        },
        {
          label: t("enum.CLOSED"),
          value: 4,
        },
      ],
    },
  ],
  auto: false,
});
let columns = ref([
  {
    label: "common.tenantName",
    prop: "taskDescription",
    fixed: "left",
    width: 180,
  },
  {
    label: "page.checkTable",
    prop: "planName",
    width: 180,
  },
  {
    label: "page.checkTime",
    prop: "checkTime",
    width: 180,
  },
  {
    label: "page.checkResult",
    prop: "checkResultValue",
    width: 180,
  },
  {
    label: "page.inspector",
    prop: "checkUsername",
    width: 180,
  },
  {
    label: "page.problemStatus",
    prop: "status",
    slotName: "status",
    width: 180,
  },
  {
    label: "common.actions",
    prop: "operation",
    width: 180,
    slotName: "operation",
    fixed: "right",
  },
]);
let tableProps = reactive({
  columns: columns.value,
  tableData: [],
  pageSize: 30,
  pageSizeList: [30, 90, 180, 300, 450],
  pageIndex: 1,
  totalCount: 0,
  selection: true,
  selectionFixed: true,
  loading: false,
  selectList: [],
  errorRowList: [],
  reserveSelect: true,
  changeSize: (size) => {
    tableProps.pageIndex = 1;
    tableProps.pageSize = size;
    getList();
  },
  changePageIndex: (pageIndex) => {
    tableProps.pageIndex = pageIndex;
    getList();
  },
  handleSelectionChange: (e) => {
    tableProps.selectList = e;
  },
});

const search = (e, num) => {
  myTableRef.value && myTableRef.value.clearSelection();
  tableProps.pageIndex = 1;
  if (num === 2) {
    tableProps.pageIndex = 1;
    tableProps.pageSize = 30;
  }
  query.taskDescription = e.taskDescription || "";
  query.planName = e.planName || "";
  query.checkUser = e.checkUser || "";
  query.checkResult = e.checkResult;
  query.statusUrgencySearchFlag =
    e.statusUrgencySearchFlag === "" ? null : e.statusUrgencySearchFlag;
  if (e.time === "") {
    query.checkStartTime = null;
    query.checkEndTime = null;
  } else {
    query.checkStartTime = e.time[0];
    query.checkEndTime = e.time[1];
  }
  getList();
};
const getList = async () => {
  tableProps.loading = true;
  let res = await getShopList({
    requestBody: { ...query },
    page: tableProps.pageIndex,
    size: tableProps.pageSize,
  });
  tableProps.loading = false;
  if (res.code === 200) {
    let list = res.data.content || [];
    tableProps.tableData = list.map((v) => {
      return {
        ...v,
        statusUrgency: locale.value === "zh-CN" ? v.statusUrgency : v.statusUrgencyEN,
        checkResultValue:
          locale.value === "zh-CN" ? v.checkResultName : v.checkResultNameEN,
      };
    });
    tableProps.totalCount = res.data.totalElements;
    getHighLightRow(tableProps.tableData);
  }
};
const operate = async (type, row = {}) => {
  if (type === 1) {
    tableProps.loading = true;
    tableProps.selection = true;
    tableProps.loading = false;
  } else if (type === 2) {
    let str = getLanguageInfo(locale.value, [
      t("common.sureTo"),
      t("common.batch"),
      t("common.close"),
      t("page.dailyStoreInspectionRecords"),
    ]);
    const content = `<p style="text-align:center">${str}？</p>`;
    ElMessageBox.confirm(content, "", {
      showClose: false,
      confirmButtonText: t("common.confirm"),
      cancelButtonText: t("common.cancel"),
      cancelButtonClass: "btn-black btn-normal",
      confirmButtonClass: "btn-yellow btn-normal",
      center: true,
      dangerouslyUseHTMLString: true,
    })
      .then(async () => {
        let ids = tableProps.selectList.map((v) => v.id);
        let res = await closeShopDeal(ids);
        if (res.code === 200) {
          ElMessage.success(res.message);
          getList();
        }
      })
      .catch((error) => {});
  } else if (type === 3) {
    const loading = ElLoading.service({
      lock: true,
      text: t("common.isDownload"),
      background: "rgba(0, 0, 0, 0.7)",
    });
    let ids = tableProps.selectList.map((v) => {
      return v.id;
    });
    let res = await exportShopList(ids);
    await downloadFile(res);
    loading.close();
  } else if (type === 4) {
    tableProps.loading = true;
    tableProps.selection = false;
    myTableRef.value && myTableRef.value.clearSelection();
    tableProps.loading = false;
  }
};
const toDetail = (row) => {
  router.push(`/daily-store-inspection-detail/${row.id}`);
};
const getHighLightRow = (list) => {
  tableProps.errorRowList = [];
  list.forEach((v, index) => {
    if ([1, 2, 3].includes(v.statusUrgencyCode) || v.checkResult === "WITH_ISSUE") {
      tableProps.errorRowList.push(index);
    }
  });
};
onBeforeMount(() => {
  locale.value === "en-US" && (columns.value[5].width = 260);
});
onActivated(() => {
  getList();
});
</script>
<style scoped>
.result {
  font-weight: bold;
  color: black;
}
</style>
